<template>
    <div class="dt-item">
        <item-head :info="itemheadinfo"></item-head>
        <p class="dt-message">{{info.message}}</p>
        <figure class="img-wrap">
            <router-link to="#">
                <img :src="info.img" alt="">
            </router-link>
            <div class="img-count">
                <span class="iconfont icon-img"></span>
                {{info.imgCount}}
            </div>
        </figure>
        
        <item-utils :info="itemutilsinfo"></item-utils>

        <div class="demo" @click="demo">测试</div>
    </div>
</template>

<script>

    import ItemHead from "@/components/ItemHead";
    import ItemUtils from "@/components/ItemUtils";

    export default {
        data() {
            return {
                itemheadinfo: {},
                itemutilsinfo: {}
            }
        },
        props:['info'],
        components: {
            ItemHead,
            ItemUtils
        },
        methods: {
            demo () {
                console.log(this.info);
            }
        },
        created() {
            this.itemheadinfo = {
                user: this.info.user,
                pet: this.info.pet,
                isFollow: this.info.user.isFollow || ''
            };

            this.itemutilsinfo = this.info.likes;
        }
    }
</script>

<style scoped>
    .dt-item {
        text-align: left;
        background: #fff;
        margin-bottom: 100px;
    }
    .dt-message {
        padding: 0 15px;
        font-size: 14px;
        color: #333;
    }
    .img-wrap {
        position: relative;
        margin: 0;
        padding: 0;
    }
    .img-wrap img {
        width: 100%;
    }
    .img-wrap .img-count {
        position: absolute;
        z-index: 9;
        color: #fff;
        bottom: 12px;
        right: 12px;
        font-size: 14px;
    }
</style>